28. Exercise: Add Dark Mode Support

Now it's time for you to complete this exercise yourself!

You're almost done! In this exercise we'll put some finishing touches on the app by updating it to support the really cool Material Dark theme.

1. Change theme to DayNight.

In styles.xml, change the AppTheme parent theme from Light to DayNight:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">

2. Turn on the dark theme.

In MainActivity's onCreate(), call AppCompatDelegate.setDefaultNightMode() to turn on the dark theme:

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

Run the app and verify it has switched to the dark theme!

Generate your own dark theme color palette.

1. Create a night-theme on material.io.

Visit the material.io website and use the color picker to create a night-theme color palette, then generate and download the colors.xml file.

2. Add the colors to your app.

Create a res/drawable-night/ resource folder and save the new colors.xml file there.

If you want to start at this step, you can download this exercise from: Step.13-Exercise-Add-Dark-Mode-Support.

You will find plenty of //TODO comments to help you complete this exercise, and if you get stuck, go back and watch the video again.

Once you’re done, you can check your solution against the solution we’ve provided here: Step.13-Solution-Add-Dark-Mode-Support, or using this git diff.